<template>
  <div class="all">
    <header>
      <div class="fanhui" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span class="sides">返回</span>
      </div>
      <div class="tabs">
        <div  :class="{'tabActive': tabIndex === index}"
              v-for="(item, index) in TabList" :key="index"
              @click="tabClick(index)">{{item}}</div>
      </div>
      <div class="fanhui"></div>
    </header>
    <div class="search">
      <van-search
        v-model="huliVal"
        shape="round"
        :placeholder="tabIndex === 0 ? `请输入` +typeText +`项目` : `请输入`+typeText +`师姓名`"
        left-icon=""
        show-action
        @keyup="huliSearch"
      >
        <template #left-icon>
          <div @click="huliSearch">
            <van-icon name="search" />
          </div>
        </template>
        <template #action>
<!--          <div style="" @click="huliSearch" class="sousuo">搜索</div>-->
        </template>
      </van-search>
    </div>
    <div class="content" v-if="tabIndex === 0">
      <div class="tabLeft">
        <ul>
          <li v-for="(item, index) in leftTab"
              @click="leftTabClick(index, item.TYPE_ID)"
              :class="{'leftTabAct': leftIndex === index}"
              :key="index">
            <div :class="{'leftDiv': leftIndex === index}">
              {{item.TYPE_NAME}}
            </div>
          </li>
        </ul>
      </div>
      <div class="tabContent">
        <div class="loading" v-if="tabLoading === true">
          <van-loading  size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
        </div>
        <ul v-else @click="xiangclick(item.ITEM_ID, item.ITEM_NAME, item)" v-for="(item, index) in rightTab" :key="index">
          <li class="contentLeft">
            <img src="../../assets/居家生活.png" alt="" v-show="type == 2">
            <img src="../../assets/护理@2x.png" alt="" v-show="type == 1">
            <img src="../../assets/康复@2x.png" alt="" v-show="type == 0">
          </li>
          <li class="contentRight">
            <div class="jibname">{{item.ITEM_NAME}}</div>
            <p class="time"><img src="../../assets/预约时间@2x.png" alt="">{{item.TIME}}分钟</p>
            <p class="price">￥{{item.PRICE_ONE}}/次</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="hulishiContent" ref="newConBox" v-else-if="tabIndex === 1">
      <div class="menu" v-show="tabIndex === 1" >
        <van-dropdown-menu active-color="#1DA4F4" >
          <van-dropdown-item :title="shijianTitle" v-model="value1" @change="onchange(0)" :options="option1" />
          <van-dropdown-item :title="gradeTitle" v-model="value2" @change="onchange(1)" :options="option2" />
          <van-dropdown-item :title="sexTitle" v-model="value3" @change="onchange(2)" :options="option3" />
          <van-dropdown-item :title="hospitalTitle" v-model="value4" @change="onchange(3)" :options="option4" />
        </van-dropdown-menu>
      </div>
      <div v-if="loading === true" class="loading">
        <van-loading  size="24px" type="spinner" color="#1DA4F2" >加载中...</van-loading>
      </div>
      <ul v-else v-for="(item, index) in hulishiList" :key="index" @click="runHulishi(item.STAFF_ID)">
        <li class="hulishiTop">
          <div class="hulishiImg">
            <img v-show="item.SEX === 2" src="../../assets/女医生@2x.png" alt="">
            <img v-show="item.SEX === 1" src="../../assets/男医生@2x.png" alt="">
          </div>
          <div class="hulishiTopRight">
            <p class="name">
              <label>{{item.STAFF_NAME}}</label>
              <button>{{item.GRADE_NAME}}</button>
              <button>从业{{item.YEAR}}年</button>
<!--              <span><van-icon class="star" name="star" color="#F9D739" /></span>-->
            </p>
            <p class="workTime">
              <span>{{item.MAJOR}}</span>
              <span>{{item.DEPART}}</span>
            </p>
            <p class="workTime" >
              <span v-show="item.HOSPITAL_NAME !== null">{{item.HOSPITAL_NAME}}</span>
              <span class="hospital" v-show="item.HOSPITAL_GRADE_NAME !== null">{{item.HOSPITAL_GRADE_NAME}}</span>
            </p>
          </div>
        </li>
        <li class="hulishiBottom">
          <div class="goodAt"><span>擅长: {{item.Goodat}}</span></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import videoHttp from '../../http/video.http'
// import axios from 'axios'
export default {
  name: 'HomeRecure',
  data () {
    return {
      loading: true, // 护理师加载判断
      tabLoading: true, // 护理项目加载判断
      placeholder: '', // 搜索框
      tabs1: ['护理项目', '护理师'], // 头部分类 内容
      tabs: ['康复项目', '康复师'], // 头部分类 内容
      tabs2: ['生活项目', '生活师'], // 头部分类 内容
      tabIndex: 0, // 头部分类 下标
      leftTab: [], // 左边分类菜单 内容
      leftIndex: 0, // 左边分类菜单 下标
      rightTab: [], // 右边 内容
      type: Number(this.$route.query.type), // 康复 0 ; 护理 1
      typeID: '', // 当前左边选中的TYPE_ID
      huliVal: '', // 护理页面搜索 内容
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      shijianTitle: '工作年限',
      gradeTitle: '职业等级',
      sexTitle: '性别',
      hospitalTitle: '医院等级',
      option1: [
        { text: '不限', value: '' },
        { text: '1年', value: 1 },
        { text: '2年', value: 2 },
        { text: '3年', value: 3 },
        { text: '4年', value: 4 },
        { text: '5年', value: 5 },
        { text: '5年以上', value: 6 }
      ],
      option2: [
        { text: '不限', value: '' },
        { text: '初级', value: 1 },
        { text: '中级', value: 2 },
        { text: '高级', value: 3 },
        { text: '特级', value: 4 }
      ],
      option3: [
        { text: '不限', value: '' },
        { text: '男', value: '1' },
        { text: '女', value: '2' }
      ],
      option4: [],
      hulishiList: [],
      height: '',
      select: Number(this.$route.query.select)
    }
  },
  computed: {
    TabList: function () {
      let i = this.type === 0 ? this.tabs : this.type === 1 ? this.tabs1 : this.type === 2 ? this.tabs2 : ''
      return i
    },
    typeText: function () {
      if (Number(this.type) === 0) {
        document.title = '居家康复'
        return '康复'
      } else if (Number(this.type) === 1) {
        document.title = '居家护理'
        return '护理'
      } else if (Number(this.type) === 2) {
        document.title = '居家生活'
        return '生活'
      }
    }
  },
  mounted () {

    // 从网址上截取 userid 后面的值
    this.userid = this.$utils.getUrlKey('userid')
    // this.type = this.$utils.getUrlKey('type')
    this.getTypes(this.type)
    this.height = $(window).height() - $('.content').offset().top - 50 + 'px'
    $('.content').css('height', this.height)
    this.getYiYuan()
    // if (Number(this.type) === 0) {
    //   document.title = '居家康复'
    //   if (this.tabIndex === 0) {
    //     this.placeholder = '请输入康复项目'
    //   } else if (this.tabIndex === 1) {
    //     this.placeholder = '请输入康复师姓名'
    //   }
    // } else if (Number(this.type) === 1) {
    //   document.title = '居家护理'
    //   if (this.tabIndex === 0) {
    //     this.placeholder = '请输入护理项目'
    //   } else if (this.tabIndex === 1) {
    //     this.placeholder = '请输入护理师姓名'
    //   }
    // }
  },
  methods: {
    // 跳转护理师详情
    runHulishi (nursid) {
      var title = ''
      if (Number(this.type) === 0) {
        title = this.typeText + '师'
      } else if (Number(this.type) === 1) {
        title = this.typeText + '师'
      } else if (Number(this.type) === 2) {
        title = this.typeText + '师'
      }
      this.$router.push({path: 'nurseDetails', query: {'staff_id': nursid, 'title': title}})
    },
    // 获取医院等级
    getYiYuan () {
      // http://jmx-kfdj.com/kfhl/minihospital/findHosptialGrade
      // axios.post('http://jmx-kfdj.com/kfhl/minihospital/findHosptialGrade')
      this.$http.findHosptialGrade()
        .then(res => {
          console.log(res)
          this.option4 = [{
            text: '不限', value: ''
          }]
          for (var i = 0; i < res.data.data.length; i++) {
            var add = {
              text: res.data.data[i].GRADE, value: res.data.data[i].GRADE_ID
            }
            this.option4.push(add)
          }
          // var obj = {
          //   text: '三乙', value: '9'
          // }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取当前页面是 护理项目 还是 康复项目 获取左边分类 http://jmx-kfdj.com/kfhl/miniitem/getTypes
    getTypes (type) {
      // axios.post('http://jmx-kfdj.com/kfhl/miniitem/getTypes?type=' + type)
      this.$http.getTypes({type: type})
        .then(res => {
          // console.log(res)
          this.leftTab = res.data.types
          if (this.leftTab.length > 0) {
            // 请求左边 菜单对应的右边内容
            this.getItems(this.huliVal, this.type, this.leftTab[this.leftIndex].TYPE_ID)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.go(-1)
    },
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop)
    },
    // 头部切换
    tabClick (index) {
      this.tabIndex = index
      // 护理师
      if (index === 1) {
        this.huliVal = ''
        $('.hulishiContent').css('height', this.height)
        this.getHulishi(this.huliVal, this.value1, this.value2, this.value3, this.value4)
      } else if (index === 0) {
        this.huliVal = ''
        $('.content').css('height', this.height + 'px')
      }
    },
    // 康复项目
    onSearch () {},
    // 护理项目
    huliSearch () {
      if (this.tabIndex === 0) {
        // 请求左边 菜单对应的右边内容
        this.getItems(this.huliVal, this.type, this.leftTab[this.leftIndex].TYPE_ID)
      } else if (this.tabIndex === 1) {
        this.getHulishi(this.huliVal, this.value1, this.value2, this.value3, this.value4)
      }
    },
    // 请求左边 菜单对应的右边内容 http://jmx-kfdj.com/kfhl/miniitem/getItems
    getItems (search, type, typeid) {
      // axios.post('http://jmx-kfdj.com/kfhl/miniitem/getItems?search=' + search + '&type=' + type + '&type_id=' + typeid)
      this.$http.getItems({search: search, type: type, type_id: typeid})
        .then(res => {
          // console.log(res)
          this.rightTab = res.data
          this.tabLoading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 左边tab切换选中
    leftTabClick (index, typeid) {
      this.leftIndex = index
      this.typeID = typeid
      // 请求左边 菜单对应的右边内容
      this.getItems(this.huliVal, this.type, typeid)
    },
    // 获取护理师
    getHulishi (search, shijianid, gradeid, sex, grade) {
      this.$http.getServers({
        search: search,
        grade_id: gradeid,
        shijianid: shijianid,
        sex: sex,
        grade: grade,
        type: this.type
      })
        /*
        * search
        * grade_id
        * shijianid
        * */
        .then(res => {
          console.log(res)
          // if (res.data)
          this.hulishiList = res.data
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    onchange (index) {
      this.getHulishi(this.huliVal, this.value1, this.value2, this.value3, this.value4)
      if (index === 0) {
        var shijianid = this.value1
        var shijianData = this.option1.filter(function (item) {
          return item.value === shijianid
        })
        if (shijianData[0].text === '不限') {
          this.shijianTitle = '工作年限'
        } else {
          this.shijianTitle = shijianData.text
        }
      } else if (index === 1) {
        var gradeid = this.value2
        var gradeidData = this.option2.filter(function (item) {
          return item.value === gradeid
        })
        if (gradeidData[0].text === '不限') {
          this.gradeTitle = '职业等级'
        } else {
          this.gradeTitle = gradeidData.text
        }
      } else if (index === 2) {
        var sex = this.value3
        var sexData = this.option3.filter(function (item) {
          return item.value === sex
        })
        if (sexData[0].text === '不限') {
          this.sexTitle = '性别'
        } else {
          this.sexTitle = sexData.text
        }
      } else if (index === 3) {
        var hospital = this.value4
        var hosData = this.option4.filter(function (item) {
          return item.value === hospital
        })
        if (hosData[0].text === '不限') {
          this.hospitalTitle = '医院等级'
        } else {
          this.hospitalTitle = hosData.text
        }
      }
    },
    xiangclick (itemid, name, item) {
      if (this.select === 1) {
        if (sessionStorage.getItem('priceDetail') !== null) {
          var data = JSON.parse(sessionStorage.getItem('priceDetail'))
          data.item_id = itemid
          data.item_idName = name
          data.duration = item.TIME
          data.desc = item.INTRODUCE
          sessionStorage.setItem('priceDetail', JSON.stringify(data))
          this.$router.history.go(-1)
        }
      } else {
        if (this.type === 0 || this.type === 2) {
          // http://jmx-kfdj.com/kfhl
          window.location.href = videoHttp.Http + 'kfhl/jjkf/itemdetail.do?ITEM_ID=' + itemid + '&userid=' + this.userid
        } else if (this.type === 1) {
          window.location.href = videoHttp.Http + 'kfhl/jjhl/itemdetail.do?ITEM_ID=' + itemid + '&userid=' + this.userid
        }
      }
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .all {
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
  }
  /deep/ .van-ellipsis{
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
  }
  header{
    width: 100%;
    height: 12vw;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
    z-index: 9999;
    position: sticky;
    top: 0;
  }
  .fanhui{
    width: 20%;
    display: flex;
    align-items: center;
    color: #1da4f2;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
    margin-left: 15px;
  }
  .sides{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .sousuo{
    margin-left: 10px;
    color: #1DA4F2;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .tabs{
    width: 50vw;
    height:34px;
    display: flex;
    align-items: center;
    position: absolute;
    left: 25%;
    box-sizing: border-box;
  }
  .tabs div{
    height: 34px;
    width: 50%;
    /*line-height: 29px;*/
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
    border: 2px solid #1DA4F2;
    box-sizing: border-box;
  }
  .tabs div:first-child{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .tabs div:last-child{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .tabActive {
    background: rgba(29, 164, 242, 1);
    color: white;
  }
  .search {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2vw 0;
  }
  /*搜索*/
  /deep/ .van-search{
    width: 92%;
  }
  /deep/ .van-field__control{
    padding-left: 10px;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
  }
  /deep/ .van-icon-search::before {
    content: '\F0AF';
    padding-left: 10px;
  }
  .content{
    width: 100%;
    background: #FAF9FE;
    overflow: hidden;
    display: flex;
  }
  .tabLeft{
    width: 30%;
    height: 100%;
    overflow: auto;
    background: #fff;
    font-size: 15px;
  }
  .tabLeft li{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .leftTabAct {
    color: #1DA4F2;
    background: rgba(250, 249, 254, 1);
  }
  .leftDiv{
    width: 100%;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid #1DA4F2;
  }
  .tabContent {
    width: 70%;
    margin: 0 auto;
    height: 100%;
    overflow: auto;
  }
  .tabContent ul{
    width: 95%;
    height: 30vw;
    background: white;
    margin: 2vw auto auto auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
  }
  .contentLeft{
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contentLeft img{
    width: 20vw;
    height: 20vw;
  }
  .contentRight{
    width: 55%;
    height: 20vw;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: column;
  }
  .jibname{
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-size: 15px;
  }
  .time{
    font-size: 13px;
    color: #999999;
    /*margin: 2vw 0;*/
  }
  .time img{
    margin-right: 2vw;
  }
  .price{
    color: #E3170D;
    font-size: 15px;
  }
  .contentRight p {
    display: flex;
    align-items: center;
  }
  .contentRight p img{
    width: 15px;
    height: 15px;
  }
  .loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 99999;
    width: 100%;
    box-sizing: border-box;
  }
  .hulishiContent{
    overflow: scroll;
    background: #FAF9FE;
  }
  .hulishiContent ul{
    width: 100%;
    /*height: 110px;*/
    padding: 5px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin-bottom: 1vw;
  }
  .hulishiContent ul li{
    display: flex;
  }
  .hulishiImg{
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hulishiImg img{
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    /*margin: 0 10px 0 15px;*/
  }
  .hulishiTop{
    width: 100%;
    height: 75px;
    display: flex;
    /*align-items: center;*/
    /*align-content: space-around;*/
  }
  .hulishiTopRight{
    width: 77%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .hulishiBottom {
    width: 80%;
    margin-bottom: 5px;
    display: flex;
  }
  .name{
    /*margin-bottom: 12px;*/
    display: flex;
    align-items: center;
  }
  .name span{
    color: #F9D739;
    display: flex;
    align-items: center;
  }
  .name span .star{
    margin-right: 3px;
  }
  .name label{
    display: block;
    width: 55px;
    font-size: 16px;
    font-weight: bold;
  }
  .name button{
    /*width: 44px;*/
    background: rgba(29, 164, 242, 0.1);
    border-radius: 9px;
    border: none;
    font-size: 12px;
    color: #1DA4F2;
    /*margin: 0 9px 0 15px;*/
    margin: 0 3px 0 10px;
    padding: 3px 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .workTime
  {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .workTime span{
    margin-right: 15px;
    font-size: 13px;
  }
  .hospital{
    border: 1px solid;
    width: 29px;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-weight: 500;
    color: #E3170D;
    height: 18px;
    line-height: 18px;
    font-size: 11px !important;
    padding: 1px 3px;
    font-weight: bold;
    border: 1px solid #E3170D;
    border-radius: 4px;
  }
  .goodAt {
    width:100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    color: #999999;
    font-size: 13px;
  }
  /deep/ .van-dropdown-menu__bar{
    background-color: rgba(29, 164, 242, 0.1);
    box-shadow: none;
  }
  /deep/ .van-dropdown-menu__title::after{
    border-color: transparent transparent #333 #333;
  }
</style>
